<template>
	<view style="width: 100%;height: 100%;margin-top: 15px;">
		<scroll-view  scroll-y="true" class="scroll-Y" >
			<view style="width: 100%;" v-for="item,index in activityObj" :key="index">
				
				<!-- <image src="https://tse1-mm.cn.bing.net/th/id/OIP-C.wxBJaqMfqsW9CO7WQr4ChQHaEK?w=333&h=187&c=7&r=0&o=5&pid=1.7" style="width: 90%;"></image> -->
				<uni-card  style="margin-top: 15px;margin-bottom: 30px;" >
					<template v-slot:title>
						<uni-list-item>
							<template v-slot:body>
								<!-- <view style="display: inline;width: 100%;display: flex;flex-direction: row;align-items: center;margin-left: -10px;">
									<view style="background-color: #cacaca;border-radius: 50%;width: 30px;height: 30px;display: flex;flex-direction: row; align-items: center;">
										<image :src="item.master_iconSrc" style="width: 20px;height: 20px;left: 50%;transform: translateX(-50%);"></image>
									</view>
									<text style="margin-left: 10px;">{{item.masterName}}</text>
								</view> -->
								<view style="display: inline;width: 100%;display: flex;flex-direction: row;align-items: center;margin-left: -10px;">
									<image :src="item.master_iconSrc" style="height: 40px;width: 44px;border-radius: 50%;"></image>
									<view style="width:94%;text-align: start;margin-left: 5px;">
										<text style="view">{{item.masterName }}</text>
										<br>
										<text style="font-size:smaller;">{{item.publishTime}}</text>
									</view>
									<!-- <view @click="agreeComment(index)"> -->
									<view style="margin-right: -20px;">
										<uni-icons type="more-filled" ></uni-icons>
									</view>
								</view>
							</template>
						</uni-list-item>
					</template>
					<!-- 动态内容区 -->
					
					
					<!-- 文本内容区 -->
					<view v-if="item.dymcContent.is_Text" style="width: 100%;text-align: start;margin-top: -10px;margin-bottom: 10px;" >
						<text style="width: 100%;font-size: 15px;">{{item.dymcContent.Text}}</text>
					</view>
					<!-- 宫格图片内容区 -->
					<view v-if="item.dymcContent.is_Images">
						<uni-grid :column="3" :square="true" borderColor="#FFF" :highlight="true"  style="margin-left: 5px;">
							<uni-grid-item v-for="itmm,ind in item.dymcContent.Image" :index="ind" :key="ind" @click="getItem(ind,index)">
								
								<image :src="itmm"  style="width: 98%;height: 98%;border-radius: 7px;" class="image" mode="aspectFill" />
									<!-- <text class="text">{{ item.actName }}</text> -->
							</uni-grid-item>
						</uni-grid>
					</view>
					<!-- 视频动态内容区 -->
					
					
					
					<view slot="actions" class="card-actions">
						<view class="card-actions-item" >
							<uni-icons type="redo" size="18" color="#999"></uni-icons>
							<text class="card-actions-item-text" @click="messageToggle()">分享</text>
						</view>
						<view class="card-actions-item" @click="tabLike(item.id)">
							<uni-icons v-if="!item.is_like" type="heart" size="18" color="#999"></uni-icons>
							<uni-icons v-else type="heart-filled" size="18" color="#ff0000"></uni-icons>
							<text class="card-actions-item-text">{{item.likeNum}}</text>
						</view>
						<view class="card-actions-item" @click="openComment(index)">
							<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
							<text class="card-actions-item-text">{{item.comment.number}}</text>
						</view>
					</view>
					<span style="border: 2px #000000;height: 10px;width: 90%;"></span>
					<!-- 评论板 -->
					<view v-if="item.comment_IsOpen" >
						<view 
							
							v-for="itemm, indexx in item.comment.contentList" :key="indexx"
							style="width: 100%;margin-top: 15px;"
						>
							<view style="display: inline;width: 100%;display: flex;flex-direction: row;align-items: center;margin-left: -10px;">
								<image :src="itemm.userHead" style="height: 35px;width: 45px;border-radius: 50%;"></image>
								<view style="width:90%;text-align: start;margin-left: 15px;margin-top: 10px;">
									<text style="">{{itemm.userName }}</text>
									<br>
									<text style="font-size:smaller;">{{itemm.publicTime}} {{itemm.ip}}</text>
								</view>
								<view @click="agreeComment(index, indexx)">
									<text>{{itemm.likeNumb}}</text>
									
									<uni-icons v-if="!itemm.is_agree" type="hand-up"></uni-icons>
									<uni-icons v-else type="hand-up-filled" color="red"></uni-icons>
								</view>
							</view>
							<view style="display:block;width: 90%;margin-left: 18px;margin-top: 10px;">
								<text style="display: flex;width: 90%;position: relative;text-align: start;margin-left: 20px;">{{item.comment.contentList[0].coment }}</text>
							</view>
						</view>
						<view style="width: 100%;text-align: end;margin-top: 15px;"> 
						 <text style="color: #019eff;font-size:10px;text-align: end;width: 100%;">查看更多></text>
						</view>
					</view>
					
				</uni-card>
				
				
			</view>
		</scroll-view>
		
		
	</view>
	<uni-popup ref="share" type="share" >
		
		<uni-popup-share></uni-popup-share>
	
	</uni-popup> 
	
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';

let open_comment = ref(false);
let like = ref(173);
let is_LikeComment = ref(false);

/**
 * 整体动态内容
 * 
 */


class CommentList{
	userHead:string
	userName:string
	publicTime:string
	ip:string
	likeNumb:number
	is_agree:boolean
	coment:string
	constructor(userHead:string, userName:string,publicTime:string,ip:string,likeNumb:number,is_agree:boolean,coment:string){
		this.userHead = userHead;
		this.userName = userName;
		this.publicTime = publicTime;
		this.likeNumb = likeNumb;
		this.ip = ip;
		this.is_agree = is_agree;
		this.coment = coment;
	}
}
//评论内容列
let commentContent_1 = [
	{
		userHead:'',//Image src
		userName:'字符串字符串字符字符串串',
		publicTime:'2024-12-09',
		ip:'广东',
		likeNumb:like.value,
		is_agree:false,
		coment:'哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈'
	},
	{
		userHead:'https://ts1.cn.mm.bing.net/th?id=ODLS.A2450BEC-5595-40BA-9F13-D9EC6AB74B9F&w=32&h=32&qlt=95&pcl=fffffa&o=6&pid=1.2',//Image src
		userName:'张三',
		publicTime:'2024-12-09',
		ip:'广东',
		likeNumb:like.value,
		is_agree:false,
		coment:'哈哈哈哈哈哈哈哈哈哈哈'
	},
	{
		userHead:'https://tse3-mm.cn.bing.net/th/id/OIP-C.LmYB_V97BlBjfRj8wKX44gAAAA?w=203&h=203&c=7&r=0&o=5&pid=1.7',//Image src
		userName:'张三',
		publicTime:'2024-12-09',
		ip:'广东',
		likeNumb:like.value,
		is_agree:false,
		coment:'哈哈哈哈哈哈哈哈哈哈哈'
	}
]
let commentContent_2 = [
	{
		userHead:'https://tse3-mm.cn.bing.net/th/id/OIP-C.LmYB_V97BlBjfRj8wKX44gAAAA?w=203&h=203&c=7&r=0&o=5&pid=1.7',//Image src
		userName:'字符串字符串字符字符串串',
		publicTime:'2024-12-09',
		ip:'广东',
		likeNumb:like.value,
		is_agree:false,
		coment:'哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈'
	},
	{
		userHead:'https://ts1.cn.mm.bing.net/th?id=ODLS.A2450BEC-5595-40BA-9F13-D9EC6AB74B9F&w=32&h=32&qlt=95&pcl=fffffa&o=6&pid=1.2',//Image src
		userName:'张三',
		publicTime:'2024-12-09',
		ip:'广东',
		likeNumb:like.value,
		is_agree:false,
		coment:'哈哈哈哈哈哈哈哈哈哈哈'
	},
	{
		userHead:'https://tse3-mm.cn.bing.net/th/id/OIP-C.LmYB_V97BlBjfRj8wKX44gAAAA?w=203&h=203&c=7&r=0&o=5&pid=1.7',//Image src
		userName:'张三',
		publicTime:'2024-12-09',
		ip:'广东',
		likeNumb:like.value,
		is_agree:false,
		coment:'哈哈哈哈哈哈哈哈哈哈哈'
	}
]
let commentContent_3 = [
	{
		userHead:'https://tse3-mm.cn.bing.net/th/id/OIP-C.LmYB_V97BlBjfRj8wKX44gAAAA?w=203&h=203&c=7&r=0&o=5&pid=1.7',//Image src
		userName:'字符串字符串字符字符串串',
		publicTime:'2024-12-09',
		ip:'广东',
		likeNumb:like.value,
		is_agree:false,
		coment:'哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈'
	},
	{
		userHead:'https://ts1.cn.mm.bing.net/th?id=ODLS.A2450BEC-5595-40BA-9F13-D9EC6AB74B9F&w=32&h=32&qlt=95&pcl=fffffa&o=6&pid=1.2',//Image src
		userName:'张三',
		publicTime:'2024-12-09',
		ip:'广东',
		likeNumb:like.value,
		is_agree:false,
		coment:'哈哈哈哈哈哈哈哈哈哈哈'
	},
	{
		userHead:'https://tse3-mm.cn.bing.net/th/id/OIP-C.LmYB_V97BlBjfRj8wKX44gAAAA?w=203&h=203&c=7&r=0&o=5&pid=1.7',//Image src
		userName:'张三',
		publicTime:'2024-12-09',
		ip:'广东',
		likeNumb:like.value,
		is_agree:false,
		coment:'哈哈哈哈哈哈哈哈哈哈哈'
	}
]


interface activityComment{
	id:number,
	number: number,
	contentList:CommentList[]
}

let comment_1 = (
	{
		id:1,
		number:commentContent_1.length,
		contentList:commentContent_1
	}
)
let comment_2 = (
	{
		id:1,
		number:commentContent_2.length,
		contentList:commentContent_2
	}
)
let comment_3 = (
	{
		id:1,
		number:commentContent_3.length,
		contentList:commentContent_3
	}
)

/**
 * 动态内容表：
 * {
	 is_Text:boolean;
	 Text:string;
	 is_Images:boolean;
	 Image:string[];
	 视频,meybe it have
 }
 */
interface dynamicContent{
	is_Text:boolean;
	Text:string;
	is_Images:boolean;
	Image:string[];
}

let userContent_1:dynamicContent = {
	is_Text:true,
	Text:'今儿个买了个老北京切糕，你猜怎么着，那味道,简直了，那叫一个地道~~',
	is_Images:false,
	Image:[]
}
let userContent_2:dynamicContent = {
	is_Text:true,
	Text:'今儿个买了个老北京切糕，你猜怎么着，那味道内个地道~~',
	is_Images:true,
	Image:['https://tse1-mm.cn.bing.net/th/id/OIP-C.VSh696qjBfO3tBI64j6g6QHaE8?w=278&h=185&c=7&r=0&o=5&pid=1.7','https://tse4-mm.cn.bing.net/th/id/OIP-C.sLoosZOjNJrn3LzbJ-WzDAAAAA?w=187&h=187&c=7&r=0&o=5&pid=1.7','https://tse4-mm.cn.bing.net/th/id/OIP-C.sLoosZOjNJrn3LzbJ-WzDAAAAA?w=187&h=187&c=7&r=0&o=5&pid=1.7','https://tse4-mm.cn.bing.net/th/id/OIP-C.sLoosZOjNJrn3LzbJ-WzDAAAAA?w=187&h=187&c=7&r=0&o=5&pid=1.7','https://tse4-mm.cn.bing.net/th/id/OIP-C.sLoosZOjNJrn3LzbJ-WzDAAAAA?w=187&h=187&c=7&r=0&o=5&pid=1.7','https://tse4-mm.cn.bing.net/th/id/OIP-C.sLoosZOjNJrn3LzbJ-WzDAAAAA?w=187&h=187&c=7&r=0&o=5&pid=1.7']
}
let userContent_3:dynamicContent = {
	is_Text:false,
	Text:'',
	is_Images:true,
	Image:['https://tse4-mm.cn.bing.net/th/id/OIP-C.sLoosZOjNJrn3LzbJ-WzDAAAAA?w=187&h=187&c=7&r=0&o=5&pid=1.7','https://tse4-mm.cn.bing.net/th/id/OIP-C.sLoosZOjNJrn3LzbJ-WzDAAAAA?w=187&h=187&c=7&r=0&o=5&pid=1.7','https://tse4-mm.cn.bing.net/th/id/OIP-C.sLoosZOjNJrn3LzbJ-WzDAAAAA?w=187&h=187&c=7&r=0&o=5&pid=1.7','https://tse4-mm.cn.bing.net/th/id/OIP-C.sLoosZOjNJrn3LzbJ-WzDAAAAA?w=187&h=187&c=7&r=0&o=5&pid=1.7','https://tse4-mm.cn.bing.net/th/id/OIP-C.sLoosZOjNJrn3LzbJ-WzDAAAAA?w=187&h=187&c=7&r=0&o=5&pid=1.7','https://tse4-mm.cn.bing.net/th/id/OIP-C.sLoosZOjNJrn3LzbJ-WzDAAAAA?w=187&h=187&c=7&r=0&o=5&pid=1.7']
}

//
class activityObject{
	id:number
	master_iconSrc:string	//头像
	masterName:string		//用户昵称
	publishTime:string		//发布时间
	dymcContent:dynamicContent			//宫格图
	
	likeNum:number			//点赞数
	is_like:boolean;		//是否点赞
	comment_IsOpen:boolean	
	comment:activityComment	//该动态下方评论
	
	constructor(id:number,master_iconSrc:string,is_like:boolean,masterName:string,comment_IsOpen:boolean,publishTime:string,dymcContent:dynamicContent,likeNum:number,comment:activityComment){
		
		this.id = id;
		this.master_iconSrc = master_iconSrc;
		this.masterName = masterName;
		this.publishTime = publishTime;
		this.dymcContent = dymcContent;
 
		this.comment_IsOpen = comment_IsOpen;
		this.likeNum = likeNum;
		this.comment = comment;
		this.is_like = is_like;
	}
}



//活动对象类
let activityObj:Array<activityObject> = reactive([]);
let actObj:any[] = [
	{
		id:1,
		master_iconSrc:'https://tse4-mm.cn.bing.net/th/id/OIP-C.sLoosZOjNJrn3LzbJ-WzDAAAAA?w=187&h=187&c=7&r=0&o=5&pid=1.7',
		masterName:'央视新闻',
		publishTime:'2023-02-12',
		dymcContent:userContent_1,
		likeNum:like.value,
		is_like:false,
		comment_IsOpen :false,
		comment:comment_1
	},
	{
		id:2,
		master_iconSrc:'https://ts4.cn.mm.bing.net/th?id=ODLS.59b8aa29-43c9-4137-b116-f3f1cc7dccda&w=32&h=32&qlt=94&pcl=fffffa&o=6&pid=1.2',
		masterName:'美食天下',
		publishTime:'2023-02-12',
		dymcContent:userContent_2,
		likeNum:like.value,
		comment_IsOpen :false,
		is_like:false,
		comment:comment_2
	},
	{
		id:3,
		master_iconSrc:'https://ts1.cn.mm.bing.net/th?id=ODLS.94ff244e-b994-457a-97cf-8cae1c21a8c6&w=32&h=32&qlt=99&pcl=fffffa&o=6&pid=1.2',
		masterName:'豆果美食',
		publishTime:'2023-02-12',
		dymcContent:userContent_3,
		likeNum:like.value,
		comment_IsOpen :false,
		is_like:false,
		comment:comment_3
	}
]

let previewIMG = ['https://tse4-mm.cn.bing.net/th/id/OIP-C.sLoosZOjNJrn3LzbJ-WzDAAAAA?w=187&h=187&c=7&r=0&o=5&pid=1.7','https://tse4-mm.cn.bing.net/th/id/OIP-C.sLoosZOjNJrn3LzbJ-WzDAAAAA?w=187&h=187&c=7&r=0&o=5&pid=1.7','https://tse4-mm.cn.bing.net/th/id/OIP-C.sLoosZOjNJrn3LzbJ-WzDAAAAA?w=187&h=187&c=7&r=0&o=5&pid=1.7','https://tse4-mm.cn.bing.net/th/id/OIP-C.sLoosZOjNJrn3LzbJ-WzDAAAAA?w=187&h=187&c=7&r=0&o=5&pid=1.7','https://tse4-mm.cn.bing.net/th/id/OIP-C.sLoosZOjNJrn3LzbJ-WzDAAAAA?w=187&h=187&c=7&r=0&o=5&pid=1.7','https://tse4-mm.cn.bing.net/th/id/OIP-C.sLoosZOjNJrn3LzbJ-WzDAAAAA?w=187&h=187&c=7&r=0&o=5&pid=1.7','https://tse4-mm.cn.bing.net/th/id/OIP-C.sLoosZOjNJrn3LzbJ-WzDAAAAA?w=187&h=187&c=7&r=0&o=5&pid=1.7','https://tse4-mm.cn.bing.net/th/id/OIP-C.sLoosZOjNJrn3LzbJ-WzDAAAAA?w=187&h=187&c=7&r=0&o=5&pid=1.7',]
let is_like:boolean[] = reactive([]);
// let likeNumb:number[] = ref([])

function tabLike(actId:number) {
	if(!activityObj[actId - 1].is_like)
	{
		activityObj[actId-1].likeNum++;
		
	}
	else{
		activityObj[actId-1].likeNum--;
	}
	
	activityObj[actId - 1].is_like = !activityObj[actId - 1].is_like
	
	console.log("【当前01】",activityObj[actId - 1].is_like)
	return;
}
const share = ref(null) ;
function messageToggle() {  
	
	// this.$refs.message.open()  
	share.value.open()  ;
}  

//打开评论
function openComment(index:number){
	activityObj[index].comment_IsOpen = !activityObj[index].comment_IsOpen
}
	
//点赞评论
function agreeComment(index:number,indexx:number){
	if(!activityObj[index].comment.contentList[indexx].is_agree)
	{
		activityObj[index].comment.contentList[indexx].likeNumb++;
		
	}
	else{
		activityObj[index].comment.contentList[indexx].likeNumb--;
	}
	activityObj[index].comment.contentList[indexx].is_agree = !activityObj[index].comment.contentList[indexx].is_agree;
}
	
	

function getItem(imgIndex: number,dymicIndex:number){

	uni.previewImage({
			   urls: activityObj[dymicIndex].dymcContent.Image,
			   current: imgIndex,
			   loop:true,
			   showmenu:true
	});
}



onMounted(() => {
  Object.assign(activityObj,actObj)
  let Obj:boolean[] = [];
  for(let i = 0;i < activityObj.length;i++){
  	Obj.push(false)
  }
  Object.assign(is_like,Obj);
  
  
});	
</script>

<style lang="scss">
	
	
.scroll-Y {
		height: 690px;
	}
.card-actions {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin-top: 10px;
	
	border-top: 1px #eee solid;
}
.custom-cover {
	flex: 1;
	flex-direction: row;
	position: relative;
	width: 100%;
	
}

.cover-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 35px;
	width: 100%;
	background-color: rgba($color: #000000, $alpha: 0.4);
	display: flex;
	flex-direction: row;
	

	font-size: 15px;
	color: #000000;
}

.cover-image {
	flex: 1;
	height: 150px;
	
}
.card-actions-item{
	
	display: flex;flex-direction: row; align-items: center;
}

</style>